<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标移过，改变图片路径</title>
    <style>
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      body {
        background: #000;
      }

      img {
        border: 0;
        border-radius: 3px;
      }

      ul {
        list-style-type: none;
      }

      #box {
        width: 212px;
        border: 5px solid #fff;
        overflow: hidden;
        zoom: 1;
        background: #fff;
        border-radius: 5px;
        margin: 10px auto;
        padding: 0 0 3px 3px;
      }

      #box li,
      #box li img {
        float: left;
        width: 50px;
        height: 50px;
      }

      #box li {
        margin: 3px 3px 0 0;
      }

      #box li.first {
        position: relative;
      }

      #box li.first,
      #box li.first img {
        width: 156px;
        height: 156px;
      }

      #box li.first div {
        position: absolute;
        top: 0;
        left: 0;
        width: 156px;
        height: 156px;
        display: none;
        opacity: 0.5;
        background: #fff url(img/loading.gif) 50% 50% no-repeat;
      }
    </style>
    <!-- 
    <script type="text/javascript">
        window.onload = function(){
            let smallImgs = document.querySelectorAll('#box li:not(.first)')
            console.log(smallImgs)
        }
    </script>
     -->
  </head>

  <body>
    <ul id="box">
      <li class="first">
        <img src="img/big_1.jpg" />
        <div></div>
      </li>
      <li>
        <a href="javascript:;">
          <img data-index="1" src="img/small_1.jpg" />
        </a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="2" src="img/small_2.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="3" src="img/small_3.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="4" src="img/small_4.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="5" src="img/small_5.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="6" src="img/small_6.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="7" src="img/small_7.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="8" src="img/small_8.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="9" src="img/small_9.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="10" src="img/small_10.jpg"/></a>
      </li>
      <li>
        <a href="javascript:;"><img data-index="11" src="img/small_11.jpg"/></a>
      </li>
    </ul>
    <script type="text/javascript">
      let bigImg = document.querySelector(".first img");
      let smallImgs = document.querySelectorAll("#box li:not(.first) img");

      // let secendSmallImg = smallImgs[1]
      // secendSmallImg.addEventListener('mouseenter',function(){

      //     let index = secendSmallImg.dataset.index
      //     bigImg.setAttribute('src',`img/big_${index}.jpg`)

      // })

      for (let i = 0; i < smallImgs.length; i++) {
        let el = smallImgs[i];
        el.addEventListener("mouseenter", function() {
          let currentIndex = el.dataset.index;
          let bigImgSrc = `img/big_${currentIndex}.jpg`;
          bigImg.setAttribute("src", bigImgSrc);
        });
      }
      // console.log(el)
      // console.log('上面的代码以及运行完毕')

      // smallImgs.forEach(function(item,index){
      //     item.addEventListener('mouseenter',function(){
      //         console.log(this.dataset.index)
      //     })
      // })
    </script>
  </body>
</html>
